<template>
    <div class="item">
        <div v-if="!isEditing" class="content">
            <div class="left">
                <div class="inline">{{ record.count }}×{{ formatCurrency(record.amount) }}={{ formatCurrency(result) }}
                </div>
            </div>
            <div class="down">
                <div class="left">
                    <p>{{ record.description }}</p>
                </div>
                <div class="right">
                    <!-- 这里元素反着放 -->
                    <button @click="editUser()" v-if="isLogin">修改</button>
                    <div class="inline">{{ time }}</div>
                </div>
            </div>

        </div>
        <div v-else class="edit">
            <div class="user-move"> <a @click="showList()">当前:{{ name }}</a>
            </div>

            <div class="number">
                <p>数量</p>
                <input type="text" v-model="record.count" @input="handleIntegerInput" @blur="removeLeadingZeros" />
                <p>件</p>
                <p>金额</p>
                <input type="text" v-model="record.amount" @input="handleAmountInput" @blur="formatAmount" />
                <p>元</p>
            </div>
            <div class="description">
                <p>备注</p>
                <input type="text" v-model="record.description" placeholder="描述" />
            </div>
            <div class="time-result">
                <div class="result">总计:{{ formatCurrency(record.count * record.amount) }}</div>
                <div @click="showDatePicker" class="time">{{ time }}</div>
            </div>

            <div v-if="isShowList">
                <SelectUser :users="users" :uuid="record.uuid" @updateUser="handleUpdateUser" @close="closeList" />
            </div>
            <div class="button-area">
                <button @click="handleCancel()" id="cancel">取消</button>
                <button @click="submit()" id="submit">保存</button>
            </div>
        </div>
        <DatePicker :isShow="isShowDatePicker" v-model="timestamp" @close="closeDatePicker" @confirm="handleDatePicker">
        </DatePicker>
    </div>
</template>
<script setup>
import { computed, onMounted, ref, toRef, watch } from 'vue';
import SelectUser from './SelectUser.vue';
import DatePicker from './DatePicker.vue';

const props = defineProps({
    item: Object,
    users: Array,
    isLogin: String
});
const emit = defineEmits(['update']);

const isEditing = ref(false);
const record = ref({ ...props.item });
const users = toRef(props, 'users');
const isShowList = ref(false);
const name = ref('');
const result = computed(() => {
    return record.value.count * record.value.amount;
});
const time = ref('');
const isShowDatePicker = ref(false);
const timestamp = ref(record.value.time);
const isLogin = toRef(props, 'isLogin');
let oldRecord;
onMounted(() => {
    record.value.amount;
    console.log(record.value);
    //秒级时间戳转换为毫秒级时间戳
    time.value = new Date(record.value.time * 1000).toLocaleString();
    timestamp.value = record.value.time;
    console.log(timestamp.value);
    oldRecord = { ...record.value };
});
const handleDatePicker = () => {
    time.value = new Date(timestamp.value * 1000).toLocaleString();
    record.value.time = timestamp.value;
}
const closeDatePicker = () => {
    isShowDatePicker.value = false;
};
const showDatePicker = () => {
    isShowDatePicker.value = true;
};
const editUser = () => {
    isEditing.value = true;
    findName(record.value.uuid);
};
const findName = (uuid) => {
    const user = users.value.find(user => user.uuid === uuid);
    console.log(user);
    name.value = user.name;
}
const handleUpdateUser = (uuid) => {
    record.value.uuid = uuid;
    findName(uuid);
}
const handleCancel = () => {
    console.log(oldRecord);
    record.value.uuid = oldRecord.uuid;
    record.value.count = oldRecord.count;
    record.value.amount = oldRecord.amount;
    record.value.time = oldRecord.time;
    record.value.description = oldRecord.description;
    isEditing.value = false;
}
const showList = () => {
    isShowList.value = true;
    console.log(users.value);
};
const closeList = () => {
    isShowList.value = false;
};
const submit = () => {
    emit('update', record.value);
    isEditing.value = false;
}
const handleIntegerInput = (event) => {
    let inputValue = event.target.value.replace(/[^0-9]/g, "");
    record.value.count = inputValue;
};

const removeLeadingZeros = () => {
    record.value.count = record.value.count.replace(/^0+/, "") || "0";
};

const handleAmountInput = (event) => {
    const inputValue = event.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || "";
    record.value.amount = inputValue;
};

const formatAmount = () => {
    let formattedValue = record.value.amount.replace(/^0+(\d)/, "$1");
    if (["", "."].includes(formattedValue)) {
        formattedValue = "0.00";
    } else {
        formattedValue = parseFloat(formattedValue).toFixed(2);
    }
    record.value.amount = formattedValue;
};
const formatCurrency = (value) => {
    return '¥' + value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
</script>
<style>
div.inline {
    display: inline-block;
}

.item {
    width: 100%;
    justify-content: space-between;
    border-bottom: 2px solid #F5F5F5;
    border-radius: 15px 15px 0 0;
    background-color: white;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.item .content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.item .content .left {
    font-size: clamp(1.5rem, 4vw, 2rem);
    white-space: nowrap;


}


.item .content .down {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;

    .right {
        display: flex;
        flex-direction: row-reverse;

        button {
            border: none;
            color: white;
            background-color: #4CAF50;
            border-radius: 5px;
        }
    }

    .left {
        font-size: 0.8rem;
        color: #4CAF50;
    }
}

.edit {
    input {
        width: 15vw;
        font-size: 1.5rem;
        border: none;
        border-bottom: 1px solid #4CAF50;
        margin: 0.5rem;
    }

    .user-move {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 3px;

        a {
            font-size: 23px;
        }

        button {
            border: none;
            border-left: 3px solid #4CAF50;
            font-size: 21px;
        }
    }

    .number {
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        p {
            white-space: nowrap;
            text-align: center;
            line-height: 50px;
            font-size: 21px;
        }
    }

    .description {
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        p {
            white-space: nowrap;
            text-align: center;
            line-height: 50px;
            font-size: 21px;
        }

        input {
            width: 70vw;
            font-size: 1.5rem;
            border: none;
            border-bottom: 1px solid #4CAF50;
            margin: 0.5rem;
        }
    }

    .time-result {
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        .result {
            font-size: 21px;
            color: #4CAF50;
            font-weight: 500;
        }

        .time {
            font-size: 21px;
            border-bottom: 2px solid #4CAF50;
        }

        margin-bottom: 5px;
    }

    .button-area {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;

        button {
            font-size: 21px;
            border: none;
            border-radius: 5px;
            color: white;
        }

        #cancel {
            background-color: tomato;
        }

        #submit {
            background-color: #4CAF50;
        }
    }

    display: flex;
    flex-direction: column;
}
</style>